<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      <div class="form-check form-check-inline" *ngIf="!isGeneratedOptionsEnabled">
        <label class="form-check-label ngb-tooltip-class fw-bold" ngbTooltip="Assign weights to the choices for calculating statistics."
              container="body">
          <input id="weights-checkbox" class="form-check-input" type="checkbox" [ngModel]="model.hasAssignedWeights"
                [disabled]="!isEditable" (ngModelChange)="triggerWeightsColumn($event)">
          Options are weighted
        </label>
      </div>
      <div *ngIf="model.hasAssignedWeights && !isGeneratedOptionsEnabled"
          class="form-check float-end" aria-hidden="true">Weights&#8595;
      </div>
    </div>
    <div *ngIf="!isGeneratedOptionsEnabled" class="row">
      <div id="options-section" cdkDropList (cdkDropListDropped)="onMsqOptionDropped($event)" [cdkDropListDisabled]="!isEditable">
        <div class="margin-top-22px d-flex" *ngFor="let num of model.msqChoices; let i = index; trackBy: trackMsqOption" cdkDrag cdkDragLockAxis="y">
          <div cdkDragHandle aria-hidden="true">
            <span class="btn input-group-addon">&#8597; </span>
          </div>
          <div class="flex-grow-1">
            <tm-msq-field (elementDeleted)="onMsqOptionDeleted($event)"
                          (msqText)="onMsqOptionEntered($event, i)"
                          [index]="i"
                          [isEditable]="isEditable"
                          [numberOfMsqChoices]="model.msqChoices.length"
                          [text]="model.msqChoices[i]"></tm-msq-field>
          </div>
          <div class="col-2" *ngIf="model.hasAssignedWeights">
            <tm-weight-field [isEditable]="isEditable"
                             [weight]="model.msqWeights[i]"
                             (weightEntered)="onMsqWeightEntered($event, i)"></tm-weight-field>
          </div>
        </div>
        <br>
      </div>
      <div class="mb-2">
        <button id="btn-add-option" class="btn btn-primary" name="button" ngDefaultControl
                [disabled]="!isEditable" (click)="increaseNumberOfMsqOptions()">
          <i class="fas fa-plus"></i> Add More Options
        </button>
      </div>
      <div class="mb-2 ps-5">
        <div class="checkbox">
          <label class="bold-label">
            <input id="other-checkbox" class="form-check-input" type="checkbox" [ngModel]="model.otherEnabled"
                   (ngModelChange)="triggerOtherEnabled($event)" [disabled]="!isEditable">
            Add 'Other' option (Allows respondents to type in their own answer)
          </label>
        </div>
        <div class="col-md-3" *ngIf="model.hasAssignedWeights && model.otherEnabled">
          <input id="other-weight" type="number" class="form-control" step="0.01" min="0" [ngModel]="model.msqOtherWeight"
                 (ngModelChange)="triggerModelChange('msqOtherWeight', $event)" [disabled]="!isEditable" aria-label="Weight of Other Option">
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-5 col-lg-offset-1 form">
    <div class="form-check">
      <label class="form-check-label fw-bold">
        <input id="generate-checkbox" class="form-check-input" type="checkbox" [disabled]="!isEditable"
              [ngModel]="isGeneratedOptionsEnabled"
              (ngModelChange)="triggerGeneratedOptionsChange($event)">
        Or, generate options from the list of all
      </label>
    </div>
    <select id="generate-dropdown" class="form-control form-select" [disabled]="!isGeneratedOptionsEnabled || !isEditable"
            [ngModel]="model.generateOptionsFor" (ngModelChange)="triggerModelChange('generateOptionsFor', $event)" aria-label="Generate Option List Dropdown">
      <option *ngFor="let option of PARTICIPANT_TYPES" [value]="option">{{ option | generatedChoice }}</option>
    </select>
    <br>
    <div class="form-check">
      <label class="form-check-label fw-bold">
        <input id="max-options-checkbox" class="form-check-input" type="checkbox" [disabled]="!isEditable"
              [ngModel]="isMaxSelectableChoicesEnabled"
              (ngModelChange)="triggerMaxSelectableOptionsChange($event)">
        Maximum number of options a respondent is allowed to select
      </label>
    </div>
    <input id="max-options" type="number" class="form-control" [disabled]="!isMaxSelectableChoicesEnabled || !isEditable"
           [ngModel]="displayValueForMaxSelectableOption"
           (ngModelChange)="triggerModelChange('maxSelectableChoices', $event)"
           [min]="isMinSelectableChoicesEnabled ? model.minSelectableChoices : 2"
           [max]="totalSelectableChoices"
           aria-label="Max Number of Options">
    <br>
    <div class="form-check">
      <label class="form-check-label fw-bold">
        <input id="min-options-checkbox" class="form-check-input" type="checkbox" [disabled]="!isEditable"
              [ngModel]="isMinSelectableChoicesEnabled"
              (ngModelChange)="triggerMinSelectableOptionsChange($event)">
        Minimum number of options a respondent is allowed to select
      </label>
    </div>
    <input id="min-options" type="number" class="form-control" [disabled]="!isMinSelectableChoicesEnabled || !isEditable"
           [ngModel]="displayValueForMinSelectableOption"
           (ngModelChange)="triggerModelChange('minSelectableChoices', $event)"
           min="1"
           [max]="maxMinSelectableValue"
           aria-label="Max Number of Options">
  </div>
</div>
